import React, { Component } from 'react';
import { Platform, StyleSheet, View, Text, TouchableNativeFeedback, TouchableOpacity, Image } from 'react-native';

export default class Menu extends Component {

    render() {
        let home_arrow = require('../assets/img/img/icon_cell_rightarrow.png');

        let menu = []
        this.props.menu.forEach((item, index) => {
            let menuin = []
            item.forEach((item2, index2) => {
                let acase = (
                    <View style={styles.menuLine}>
                        {item2.icon != null ? (<Image style={styles.menuIcon} source={item2.icon}></Image>) : null}
                        <View style={styles.menuTextGroup}>
                            <Text style={styles.menuTitle}>{item2.title}</Text>
                            <Text style={styles.menuDercition}>{item2.after}</Text>
                        </View>
                        <Image style={styles.menuIconButton} source={home_arrow}></Image>
                    </View>
                )
                if (Platform.OS === 'android')
                    menuin.push(
                        <TouchableNativeFeedback onPress={this.onTouch.bind(this, [index, index2])} key={index + '-' + index2}>
                            {acase}
                        </TouchableNativeFeedback>
                    )
                else
                    menuin.push(
                        <TouchableOpacity onPress={this.onTouch.bind(this, [index, index2])} key={index + '-' + index2}>
                            {acase}
                        </TouchableOpacity>
                    )
            })
            menu.push(React.createElement(View, { style: styles.menuBlock, key: index }, menuin))
        })
        return (<View>{menu}</View>)
    }
    onTouch(arr) {
        this.props.onTouch(arr)
    }
}


const styles = StyleSheet.create({
    menuBlock: {
        marginTop: 5,
        marginBottom: 5
    },
    menuLine: {
        paddingLeft: 10,
        paddingRight: 10,
        backgroundColor: '#ffffff',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        height: 50,
        borderTopWidth: 1,
        borderColor: 'transparent'
    },
    menuTextGroup: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    menuIcon: {
        height: 35,
        width: 35
    },
    menuDercition: {
        color: '#555',
        marginRight: 10
    },
    menuTitle: {
        fontSize: 19,
        marginLeft: 10
    },
    menuIconButton: {
        height: 20,
        width: 15
    }
})